<template>
    <div>
        <!-- 面包屑导航 -->
        <Bread></Bread>
        <el-card>
            <el-row>
                <el-button type="primary">添加角色</el-button>
            </el-row>
            <el-table :data="rolesList" border style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <!-- 一级分类 -->
                        <el-row v-for="item in scope.row.children" :key="item.id" type="flex" align="middle"
                            class="oneRow">
                            <el-col :span="6">
                                <el-tag closable>{{ item.authName }}</el-tag>
                            </el-col>
                            <el-col :span="18">
                                <!-- 二级分类 -->
                                <el-row v-for="it in item.children" :key="it.id">
                                    <el-col :span="5">
                                        <el-tag type="success" closable>{{ it.authName }}</el-tag>
                                    </el-col>
                                    <el-col :span="19">
                                        <!-- 三级分类 -->
                                        <el-tag type="warning" v-for="i in it.children" :key="i.id" closable
                                            @close="delRight(scope.row.id, i.id)">
                                            {{ i.authName }}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column prop="roleName" label="日期">
                </el-table-column>
                <el-table-column prop="roleDesc" label="姓名">
                </el-table-column>
                <el-table-column prop="address" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="showRights(scope.row.id)">分配角色</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 权限树 -->
            <el-dialog title="分配权限" :visible.sync="showTree" @close="close">
                <!-- {{leaf}} -->
                <!-- 树形组件 -->
                <el-tree ref="tree" :data="treeList" :props="defaultProps" node-key="id" default-expand-all show-checkbox :default-checked-keys="leaf">
                </el-tree>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showTree = false">取 消</el-button>
                    <el-button type="primary" @click="showTree = false">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
import Bread from '@/components/Bread.vue'
export default {
    components: { Bread },
    data() {
        return {
            rolesList: [],//角色列表数据
            showTree: false,//是否展示权限树模态框
            treeList:[],//权限列表
            defaultProps:{
                label: 'authName',
                children:'children'
            },
            leaf:[],//获取所有三级叶子节点
        }
    },
    methods: {
        /* 获取角色列表数据 */
        async getRoles() {
            let res = await this.$http.get('roles');
            this.rolesList = res.data;
        },
        /* 删除角色 */
        async delRight(roleId, rightId) {
            let res = await this.$http.delete(`roles/${roleId}/rights/${rightId}`);
            // console.log(res);
            let key = this.rolesList.findIndex(item => {
                return item.id == roleId
            })
            this.rolesList[key].children = res.data
        },
        /* 展示权限树的方法 */
        showRights(id) {
            this.leaf=[];
            this.showTree = true;
            let key = this.rolesList.findIndex(item => {
                return item.id == id
            })
            this.getLeaf(this.rolesList[key].children);
        },
        /* 获取所有权限数据 */
        async getTree() {
            let res = await this.$http.get('rights/tree');
            // console.log(res);
            this.treeList = res.data;
        },
        /* 获取当前角色下的三级权限 */
        getLeaf(arr) {
            // console.log(arr);
            arr.forEach(item=>{
                if(item.children){
                    this.getLeaf(item.children);
                } else {
                    this.leaf.push(item.id);
                }
            })
        },
        /* 关闭所有节点 */
        close() {
            this.$refs.tree.setCheckedKeys([]);
        }
    },
    mounted() {
        this.getRoles();
        this.getTree();
    }
}
</script>

<style lang="scss" >
.oneRow {
    margin: 20px;
    border-top: 1px solid #eee;
    padding: 20px;
}

.oneRow:last-child() {
    border-bottom: 1px solid #eee;
}
</style>